﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="Images/ico/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link type="text/css" rel="stylesheet" href="/layui/css/layui.css"  media="all">
<script type="text/javascript" src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/layui-post.js"></script>
<style type="text/css">
.desc{margin:5px 0;display: flow-root;}
.layui-layer-nobg{border-radius: 15px!important;background:#FFFFFF!important;}
.white-color{background: #fff;border-radius: 7px;}
.choosespace{position: absolute;margin-left: 50px; border: 1px solid red;border-radius: 50%; background: red;color: white;padding: 1px;font-size: 10px;width: 11px;height: 11px;text-align: center; line-height: 11px;}
.lists li {height: 50px;}
.layui-btn-xs {height: 25px; line-height: 25px; padding: 0 8px;}
.detailPrice{color: red;font-size: 25px;padding: 5px 10px;border-radius: 10px 10px 0 0; background: url(/images/d1.png);transform: translateY(-10px);}
.mainDetail{margin-top: 10px;padding: 10px;display: flow-root;}
.discussDetail{margin-top: 10px;padding: 10px;display: flow-root;}
.discussContent{margin-top: 10px;display: flow-root;}
.discussCount::after{content: '';background: url("/img/right.png");width: 14px;height: 14px;display: inline-block;background-size: cover;margin-left: 5px;vertical-align: text-top;}
.discussCountBtn::after{content: '';background: url("/img/right.png");width: 14px;height: 14px;display: inline-block;background-size: cover;margin-left: 5px;vertical-align: text-top;}
</style>
</head>
<body style="background: #F0F0F0;">
<header class="ng-scope">
    <h4 class="title-order">
        <a class="title-top" href="javascript:window.location.replace(document.referrer);" onclick="insertBachCart(1)"></a>
        <a class="title-center">商品详情</a>
        <a class="title-right" href="/index"></a>
    </h4>
</header>
<div class="ng-scope" style="margin-bottom: 60px;margin-top: 50px;">
    <div class="lists white-color">
        <div class="detailImg"></div>
        <div class="detailPrice"></div>
        <div class="detail" style="padding: 10px;"></div>
    </div>
    <div class="white-color mainDetail"></div>
    <div class="white-color discussDetail">
        <div style="display: none;" id="discussDetailShow">
            <div class="desc" style="font-size: 18px;color: #000;font-weight: bold;margin-bottom: 15px;">
                <div style="float: left;width: 50%;height: 40px;line-height: 40px;color: #000;">评价<span id="goodPre" style="font-size: 12px;">好评度0%</span></div>
                <div style="float: left;width: 50%;height: 40px;line-height: 40px;font-size: 12px;color: #9F9F9F;text-align: right;display: none;" id="discussCount">0条评论</div>
            </div>
            <div class="desc">
                <button id="goodBtn" onclick="loadMoreDiscuss('3')" class="layui-btn layui-btn-xs" style="background: #ff000066;border-radius: 5px;color: #000;display: none;"><i class="layui-icon layui-icon-praise" style="color:red;"></i><span id="goodNums">0</span></button>
                <button id="badBtn" onclick="loadMoreDiscuss('2')" class="layui-btn layui-btn-xs" style="background: #B2ADAD66;border-radius: 5px;color: #000;display: none;"><i class="layui-icon layui-icon-tread"></i><span id="badNums">0</span></button>
            </div>
            <div class="desc">
                <ul class="discussContent"></ul>
            </div>
        </div>
    </div>
</div>
<!--底部结算导航-->
<div class="cart ng-scope">
    <div class="r"><a onclick="insertBachCart()">去结算</a></div>
    <div class="l ng-binding">
        <span style="font-size: 14px;color: #fff;">￥</span><label id="totalmoney">0</label>
    </div>
    <i id="totalcartnumber" class="ng-binding cartnum">0</i>
    <a onclick="insertBachCart()"><img src="img/shop_cart01.png" alt="..."></a>
</div>
<!--/底部结算导航-->
</body>
<script>
$.ajaxSetup({contentType: "application/json; charset=utf-8"});
var userInfo = $.parseJSON(sessionStorage.getItem("userInfo"));
var goodsIds=[],reqdataList=[],enumsData=[],spacesList=[],spacesNameList=[],totalcartnumber = 0,totalmoney = 0;
layui.use(['layer','form','element','util'], function(){
    var loading = layer.load();
    layui.util.fixbar({
        top:true,css: {bottom: 105 },showHeight:100,
        click: function (type) {if (type === 'top') $('.layui-fluid').animate({scrollTop: 0}, 200);}
    });
    $.post("/cateringGoods/select",JSON.stringify({sysId:getQueryString("sysId")}),function(res){
        layer.close(loading)
        for(var i in res.data){
            $(".detailImg").append(
                '<div class="img"><img style="width: 100%;height:300px;" src="'+res.data[i].goodsImg+'" class="img-responsive" alt="..." /></div>'
            )
            $(".detailPrice").append(
                '<div class="desc" style="color:red;"><span style="font-size: 14px;color: red;">￥</span>'+(res.data[i].goodsPrice*res.data[i].discount/10).toFixed(2)+'</div>' +
                '<div class="desc" style="font-size:12px;color:#f33939;display: '+(res.data[i].discount=="10.00"?'none':'inline')+';"><span style="text-decoration: line-through;color:#f33939;font-size: 12px;"><span style="font-size: 12px;color: #f33939;">￥</span>'+res.data[i].goodsPrice+'</span> | <span style="color: #f33939;font-size: 12px;">'+cutZero(res.data[i].discount)+'折</span></div>'
            )
            $(".detail").append(
                '<div class="desc" style="font-size: 16px;font-weight:bold;">'+res.data[i].goodsName+'</div>' +
                '<div class="desc" style="width: 36%;float: left;line-height: 35px;color: #ef9718;">已售：'+res.data[i].saleNum+'</div>'
            )
            if(res.data[i].isSpaces === 0){
                $(".detail").append(
                    '<li price="'+res.data[i].goodsPrice+'" id="'+res.data[i].sysId+'li" goodsId="'+res.data[i].sysId+'" style="width: 100%;">' +
                    '<div class="r" style="width: 64%;"><div class="showaddcart">' +
                    '<img src="img/cart_01.png" class="img-responsive join" id="'+res.data[i].sysId+'join" alt="..." />' +
                    '<div class="num_con"><img src="img/num_l.png" class="img-responsive num_l" alt="..." />' +
                    '<span class="number" style="padding: 10px;" id="'+res.data[i].sysId+'">0</span>' +
                    '<img src="img/num_r.png" class="img-responsive num_r" alt="..." />' +
                    '</div></div></div></li>'
                )
            }else{
                $('.detail').append(
                    '<li price="'+res.data[i].goodsPrice+'" id="'+res.data[i].sysId+'lic" style="width: 100%;" class="spaces">' +
                    '<div class="r" style="width: 64%;"><div class="showaddcart">' +
                    '<div class="choosespace" style="display: none;" id="'+res.data[i].sysId+'cnum">0</div>'+
                    '<img src="img/cart_choose.png" class="img-responsive" onclick="chooseSpaces(\''+res.data[i].sysId+'\',\''+res.data[i].goodsName+'\')" style="width: 70px;margin-right: 5px;" alt="..." />' +
                    '<div class="num_con"><img src="img/num_l.png" class="img-responsive num_l" alt="..." />' +
                    '<span class="number" style="padding: 10px;" id="'+res.data[i].sysId+'">0</span>' +
                    '<img src="img/num_r.png" class="img-responsive num_r" alt="..." />' +
                    '</div></div></div></li>'
                )
            }
            $(".mainDetail").append(
                '<div class="desc" style="font-size: 18px;color: #000;font-weight: bold;margin-bottom: 15px;">详情</div>'+
                '<div class="desc"><div style="float: left;width: 20%;">掌柜描述：</div><div style="width: 80%;float: left;">'+res.data[i].remark+'</div></div>'+
                '<div class="desc"><div style="float: left;width: 20%;">主料：</div><div style="width: 80%;float: left;">'+res.data[i].goodsMain+'</div></div>'+
                '<div class="desc"><div style="float: left;width: 20%;">份量：</div><div style="width: 80%;float: left;">'+res.data[i].goodsWeight+'</div></div>'
            )
        }
    }).done(function(){
        //查询购物车的数据
        $.post("/cateringCart/select",JSON.stringify({userId:userInfo.userId}),function(res){
            reqdataList = [];goodsIds = [];
            for(var i in res.data){
                $("#"+res.data[i].goodsId+"cart").text(res.data[i].goodsPrice)
                //只针对可选择规格的修改price
                $("#"+res.data[i].goodsId+"lic").attr("price",res.data[i].goodsPrice)
                totalcartnumber += res.data[i].goodsNum
                totalmoney += res.data[i].goodsNum*res.data[i].goodsPrice
                $("#"+res.data[i].goodsId).text(res.data[i].goodsNum)
                $("#"+res.data[i].goodsId+"li").addClass("on")
                //将数据放入购物车
                if(goodsIds.indexOf(res.data[i].goodsId) === -1) {
                    $("#"+res.data[i].goodsId+"cnum").show()
                    $("#"+res.data[i].goodsId+"cnum").text(res.data[i].goodsNum)
                    let resdata = {};
                    goodsIds.push(res.data[i].goodsId)
                    resdata.goodsId = res.data[i].goodsId;
                    resdata.goodsNum = res.data[i].goodsNum
                    resdata.goodsPrice = res.data[i].goodsPrice
                    resdata.spacesId = res.data[i].spacesId
                    if(!isEmpty(res.data[i].spacesId)) $("#"+res.data[i].goodsId).parent().parent().parent().find(".price").html("￥"+res.data[i].goodsPrice)
                    resdata.userId = userInfo.userId
                    reqdataList.push(resdata);
                }
            }
            $("#totalcartnumber").text(totalcartnumber);
            $("#totalmoney").text(totalmoney.toFixed(2));
        })
    })
    //shop：加入购物车
    $(".lists li").each(function () {
        var objLi = $(this);
        //点击购物车
        $(objLi).find(".join").click(function () {
            $(objLi).addClass("on");
            $(objLi).find(".number").text(1);
            var goodsId =$(objLi).attr("goodsId");
            var reqdata={};
            var number = parseInt($(objLi).find(".number").text());
            if(goodsIds.indexOf(goodsId) === -1) {
                goodsIds.push(goodsId)
                reqdata.goodsId = goodsId;
                reqdata.goodsNum = number
                reqdata.goodsPrice = $(objLi).attr("price")
                reqdata.userId = userInfo.userId
                reqdataList.push(reqdata);
            }else {
                for(var i in reqdataList){
                    if(reqdataList[i].goodsId === goodsId) reqdataList[i].goodsNum = number;
                }
            }
            CountNumPrice();
        });
        //点击减数量
        $(objLi).find(".num_l").click(function () {
            var goodsId =$(objLi).attr("goodsId");
            var number = parseInt($(objLi).find(".number").text()) - 1;
            var cart = $(objLi).attr("cart");
            if (number > 0) {
                $(objLi).find(".number").text(number);
                if(goodsIds.indexOf(goodsId) > -1){
                    for(var i in reqdataList){
                        if(reqdataList[i].goodsId === goodsId) reqdataList[i].goodsNum = number;
                    }
                }
            } else {
                if(goodsIds.indexOf(goodsId) > -1) {
                    goodsIds.splice($.inArray(goodsId,goodsIds),1)
                    reqdataList.splice($.inArray(goodsId,reqdataList),1)
                }
                if (cart == 1) {//说明是购物车中的操作
                    $(objLi).remove();
                } else if (cart == 2) {//说明是外卖的操作
                    if (number == 0) {
                        $(objLi).find(".number").text(number);
                    }
                } else {
                    $(objLi).removeClass("on");
                }
            }
            CountNumPrice();
        });
        //点击加数量
        $(objLi).find(".num_r").click(function () {
            var goodsId =$(objLi).attr("goodsId");
            var reqdata={};
            var number = parseInt($(objLi).find(".number").text()) + 1;
            if(goodsIds.indexOf(goodsId) === -1) {
                goodsIds.push(goodsId)
                reqdata.goodsId = goodsId;
                reqdata.goodsNum = number
                reqdata.goodsPrice = $(objLi).attr("price")
                reqdata.userId = userInfo.userId
                reqdataList.push(reqdata);
            }else {
                for(var i in reqdataList){
                    if(reqdataList[i].goodsId === goodsId) reqdataList[i].goodsNum = number;
                }
            }
            $(objLi).find(".number").text(number);
            CountNumPrice();
        });
        //点击查看产品详情
        $(objLi).find(".view").click(function () {
            $(objLi).find(".detail").show(200);
        });
    });
    $.post("/cateringDiscuss/select",JSON.stringify({goodsId:getQueryString("sysId"),status:0,page:1,limit:5}),function(res){
        for(var i in res.data){
            if(i < 2){
                $(".discussContent").append(
                    '<li style="margin-bottom: 10px; border-bottom: 1px solid #dbd8d8;display: flow-root;">' +
                    '<div style="height: 60px;">' +
                    '<div style="width: 15%;float: left;height: 60px;line-height: 50px;"><img src="/img/header.png" style="width: 50px;height: 50px;"></div>' +
                    '<div style="width: 85%;float: left;height: 60px;">' +
                    '<div style="color: #000;line-height: 30px;">'+res.data[i].userName+'</div>' +
                    getDescLv(res.data[i]) +
                    '</div>' +
                    '</div>' +
                    (!isEmpty(res.data[i].content)?'<div style="color: #000;"><div style="width:85%;float:right; padding: 10px 0 20px 0;">'+res.data[i].content+'</div></div>':'') +
                    '</li>'
                )
            }
        }
    }).done(function(){
        $.post("/cateringDiscuss/selectDiscuss",JSON.stringify({goodsId:getQueryString("sysId"),status:0}),function(res){
            if(res.data.sumNums == 0){
                $(".discussDetail").html("<div>暂无评价，期待您的餐后评价</div>")
            }else{
                $("#discussDetailShow").show();
                $("#discussCount").show().html('<div onclick="window.location.href=\'/morediscuss?goodsId='+getQueryString("sysId")+'\'" class="discussCount">'+res.data.sumNums+'条评论</div>')
                if(res.data.sumNums > 2){
                    $(".discussContent").append(
                        '<li style="margin-top:20px;display: flow-root;">' +
                        '<div style="height: 40px;">' +
                        '<button onclick="window.location.href=\'/morediscuss?goodsId='+getQueryString("sysId")+'\'" class="layui-btn" style="width: 100%;background: #e9eded;color:#000;border-radius: 5px;">'+res.data.sumNums+'条评价<i class="layui-icon layui-icon-right"></button>' +
                        '</div>' +
                        '</li>'
                    )
                }
                if(res.data.goodNums > 0) {
                    $("#goodBtn").show()
                    $("#goodNums").html(res.data.goodNums)
                }
                if(res.data.badNums > 0) {
                    $("#badBtn").show()
                    $("#badNums").html(res.data.badNums)
                }
                $("#goodPre").html("（好评度"+parseInt(res.data.goodNums/res.data.sumNums*100)+"%）")
            }
        })
    })
})
function getDescLv(data){
    if(data.descLv >= 3){
        return '<div style="font-size: 12px;"><i class="layui-icon layui-icon-praise" style="color:red;margin-right: 5px;font-size: 12px;"></i>赞了该商品</div>'
    }else {
        return '<div style="font-size: 12px;"><i class="layui-icon layui-icon-tread" style="margin-right: 5px;font-size: 12px;"></i>踩了该商品</div>'
    }
}
function CountNumPrice() {
    console.log(reqdataList)
    var totalcartnumber = 0;//数量
    var totalmoney = 0;//价格
    reqdataList.forEach(function (item, index) {
        var number = parseInt(item.goodsNum);
        var price = parseFloat(item.goodsPrice);
        totalcartnumber = totalcartnumber + number;
        totalmoney = totalmoney + (number * price);
    });
    $("#totalcartnumber").text(totalcartnumber);
    $("#totalmoney").text(totalmoney.toFixed(2));
}
//弹窗计算价格
function CountNumPriceLayer(id,num,price) {
    $("#"+id).html(num)
    $("#"+id).parent().parent().parent().parent().attr("price",price)
    $("#"+id).parent().parent().parent().find(".price").html('<span style="font-size: 10px;color:red;">￥</span>'+price)
    if(num/1 > 0) {
        $("#"+id+"cnum").show();
    }else{
        $("#"+id+"cnum").hide();
    }
    $("#"+id+"cnum").text(num);
    CountNumPrice()
}
function chooseSpaces(goodsId,goodsName){
    layer.open({
        type:2,
        area: ['90%', '50%'],
        title:[goodsName,'font-size: 16px; font-weight: bold;'],
        closeBtn:1,
        btnAlign: 'c',
        anim: 2,
        skin:'layui-layer-nobg',
        shadeClose:true,
        content:"/choosespaces?goodsId="+goodsId,
        scrollbar:false,
    })
}
function loadMoreDiscuss(type){
    window.location.href='/morediscuss?type='+type+"&goodsId="+getQueryString("sysId")
}
function insertBachCart(type){
    if(reqdataList.length > 0){
        $.post("/cateringCart/insertBach",JSON.stringify({userId:userInfo.userId,cartslist:reqdataList}),function(res){
            if(type != 1) if(res.success) window.location.href = "/cart"
        })
    }else{
        if(type != 1) layer.msg("购物车空空如也",{icon:0,time:1500})
    }
}
</script>
</html>
